<template>
	<view class="view">
		<view class="list">
			<view class="item" v-for="item in mainCategoryList" :key='item.id' @tap="toKindList(item.id)">
				<image :src="item.icon" mode=""></image>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestCategorys
	} from 'api/kind/kind.js';

	export default {
		data() {
			return {
				mainCategoryList: [],
			}
		},
		methods: {
			getMainCategoryList() {
				requestCategorys(this.code).then(res => {
					console.log(res);
					this.mainCategoryList = res.data.items[0].children;
					this.mainCategoryList.reverse();
				})
			},
			toKindList(id) {
				uni.navigateTo({
					url: `/pages/kind/kind-list/kind-list?kindId=${id}`,
				})
			}
		},
		onShow() {
			this.getMainCategoryList();
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 56rpx 40rpx;
			width: 100%;

			.name {
				font-size: 48rpx;
				color: #3e3e3e;
			}

			.item:nth-child(1) {
				background-color: #d5d5d5;
			}

			.item:nth-child(2) {
				background-color: #ffffff;
			}

			.item:nth-child(-n+2) {
				float: left;
				position: relative;
				margin-bottom: 56rpx;
				width: 100%;
				height: 302rpx;
				box-shadow: 0 24rpx 40rpx 0 rgba(83, 66, 49, .05);
				border-radius: 40rpx;
				overflow: hidden;

				.name {
					position: absolute;
					left: 52rpx;
					top: 148rpx;
				}

				image {
					float: right;
					width: 402rpx;
					height: 100%;
				}
			}

			.item:nth-child(n+3) {
				float: left;
				position: relative;
				margin-bottom: 56rpx;
				width: 312rpx;
				height: 442rpx;
				box-shadow: 0 24rpx 40rpx 0 rgba(83, 66, 49, .05);
				border-radius: 40rpx;
				overflow: hidden;

				.name {
					position: absolute;
					left: 52rpx;
					top: 148rpx;
				}

				image {
					float: right;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
